AJAX (Asynchronous JavaScript and XML) ব্যবহার করে আপনি একটি ওয়েব পেজে সার্ভারের সাথে যোগাযোগ করতে পারেন, কিন্তু পেজ রিলোড না করেই। এটি ডেটা ভ্যালিডেশন বা ডেটা সাবমিশনের মতো কার্যক্রম দ্রুত এবং ব্যবহারকারী-বান্ধব করে তোলে। বিশেষ করে ডেটা ভ্যালিডেশন ক্ষেত্রে, যেখানে ব্যবহারকারী ইনপুট ফিল্ডের মান যাচাই করার জন্য পেজ রিফ্রেশ করার প্রয়োজন হয় না। AJAX এর মাধ্যমে ক্লায়েন্ট সাইডে ডেটা সঠিকভাবে ইনপুট করা হচ্ছে কিনা তা যাচাই করা সম্ভব হয়, আর এর ফলে ব্যবহারকারী দ্রুত রেসপন্স পায়।

ASP.Net MVC অ্যাপ্লিকেশন এ AJAX এর মাধ্যমে ডেটা ভ্যালিডেশন করার জন্য, আপনি JavaScript এবং AJAX কল ব্যবহার করতে পারেন। এখানে দেখানো হচ্ছে কিভাবে সার্ভার সাইড ভ্যালিডেশন এবং AJAX এর মাধ্যমে ডেটা ভ্যালিডেশন করা যায়।

AJAX এর মাধ্যমে ডেটা ভ্যালিডেশন: উদাহরণ

ধরা যাক, আপনার একটি Register ফর্ম রয়েছে, যেখানে ব্যবহারকারীকে তাদের ইমেইল অ্যাড্রেস ইনপুট দিতে হবে। আমরা AJAX ব্যবহার করব ইমেইল ভ্যালিডেশন করার জন্য, যাতে যদি একটি ইমেইল অ্যাড্রেস আগে নিবন্ধিত থাকে তবে তা তাত্ক্ষণিকভাবে জানানো যায়।

১. Controller Side - Server-Side Validation

প্রথমে, একটি অ্যাকশন মেথড তৈরি করুন যা সার্ভারে ইনপুট ইমেইল চেক করবে।

using Microsoft.AspNetCore.Mvc;
using System.Linq;

public class UserController : Controller
{
    private readonly ApplicationDbContext _context;

    public UserController(ApplicationDbContext context)
    {
        _context = context;
    }

    // Ajax action to validate email
    [HttpPost]
    public JsonResult CheckEmailAvailability(string email)
    {
        bool isEmailExist = _context.Users.Any(u => u.Email == email); // Check if email already exists

        if (isEmailExist)
        {
            return Json("This email address is already taken.");
        }
        else
        {
            return Json(true); // Email is available
        }
    }
}

এই CheckEmailAvailability মেথডটি সার্ভারে ইমেইল চেক করে এবং একটি JSON রেসপন্স প্রদান করে: যদি ইমেইল আগে থেকেই রেজিস্টার করা থাকে তবে একটি মেসেজ ফেরত পাঠায়, অন্যথায় true রিটার্ন করে (যা AJAX এর মাধ্যমে ডেটা সঠিক হলে ব্যবহৃত হবে)।

২. View Side - AJAX Request

এখন, আমরা JavaScript/jQuery ব্যবহার করে এই সার্ভার সাইড অ্যাকশনটিকে কল করব।

View (Register.cshtml)

@{
    ViewData["Title"] = "Register";
}

<h2>Register</h2>

<form id="registerForm">
    <div class="form-group">
        <label for="Email">Email</label>
        <input type="email" id="Email" name="Email" class="form-control" required />
        <span id="email-error" style="color:red;"></span> <!-- Error message will be displayed here -->
    </div>

    <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" id="Password" name="Password" class="form-control" required />
    </div>

    <button type="submit" class="btn btn-primary">Register</button>
</form>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // AJAX email validation
            $('#Email').on('blur', function () {
                var email = $('#Email').val();

                $.ajax({
                    url: '@Url.Action("CheckEmailAvailability", "User")', // Controller action URL
                    type: 'POST',
                    data: { email: email },
                    success: function (response) {
                        if (response === "This email address is already taken.") {
                            $('#email-error').text(response); // Show error message if email exists
                        } else {
                            $('#email-error').text(""); // Clear error message if email is available
                        }
                    },
                    error: function () {
                        alert("Error occurred while validating email.");
                    }
                });
            });

            // Handle form submission (optional, for full form validation)
            $('#registerForm').on('submit', function (e) {
                e.preventDefault();

                var email = $('#Email').val();
                var password = $('#Password').val();

                // Additional client-side validation if needed
                if (email && password) {
                    $.ajax({
                        url: '@Url.Action("Register", "User")', // POST request to register action
                        type: 'POST',
                        data: { email: email, password: password },
                        success: function (response) {
                            alert('Registration successful!');
                        },
                        error: function () {
                            alert("Error occurred during registration.");
                        }
                    });
                }
            });
        });
    </script>
}

৩. ব্যাখ্যা

• AJAX Call: ইমেইল ফিল্ডে blur ইভেন্টটি ট্রিগার করার পর, AJAX কল সার্ভারে পাঠানো হয় CheckEmailAvailability অ্যাকশনে। এই অ্যাকশনটি চেক করে যে ইমেইলটি ডাটাবেসে আছে কিনা। যদি থাকে, একটি ত্রুটি বার্তা রিটার্ন হয়, যা ব্যবহারকারীকে জানায় যে ইমেইলটি আগে থেকেই নিবন্ধিত।
• Error Message Display: সার্ভারের রেসপন্স অনুযায়ী, ইমেইল যদি আগে থেকেই নেওয়া থাকে তবে ত্রুটি বার্তা প্রদর্শিত হবে, অন্যথায় কোন ত্রুটি বার্তা দেখানো হবে না।
• Form Submission: পুরো ফর্ম সাবমিট করার সময়ও AJAX ব্যবহার করে ডেটা সার্ভারে পাঠানো হতে পারে, যা সার্ভার সাইড ভ্যালিডেশন এবং রেজিস্ট্রেশন প্রসেস পরিচালনা করবে।

ফলস্বরূপ

এই পদ্ধতিতে আপনি একটি দ্রুত, ইন্টারেকটিভ এবং ইউজার-বান্ধব ডেটা ভ্যালিডেশন ব্যবস্থা তৈরি করতে পারবেন। ব্যবহারকারী ফিল্ডে কোন ভুল ইনপুট দিলে পেজ রিফ্রেশ ছাড়াই তা দেখানো সম্ভব হয়, যা পুরো প্রক্রিয়াটি আরো স্মুথ এবং ইফেক্টিভ করে তোলে। AJAX ব্যবহারের ফলে সার্ভারের সাথে সিঙ্ক্রোনাইজড থাকা সত্ত্বেও ব্যবহারকারী কখনোই পেজ রিলোড করতে হবে না।